
<!doctype html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>充值续费</title>
    <link rel="stylesheet" href="/static/app/lib/iconfont/iconfont.css">
    <link rel="stylesheet" href="/static/app/css/style.css">
    <script src="/static/app/lib/zy.rem.js"></script>
    <script src="/static/app/lib/jquery1.12.3.min.js"></script>
    <script src="/static/app/js/base.js"></script>
    <link rel="stylesheet" href="/static/app/css/core.css">
    <script src="/static/layer/layer.min.js"></script>

    <style>
        .add{
            width: 64%;
            height: 0.4rem;
            margin-left: 0.6rem;
            background:transparent;
            border:none;
            outline:medium;
        }
        .lad{
            margin-left: 0.6rem;
            color: #000;
            font-size: 0.25rem;
        }
        .info-links{
            margin-top: 0.05rem;
        }
        .button_lar{
            width: 90%;
            height: 0.7rem;
            margin-left: 5%;
            margin-top: 2rem;
            color: #fff;
            font-size: 0.3rem;
            border: 0;
            border-radius:0.1rem;
            background-color: #0b76ac;
            outline:none;
        }
        .gdf{
            margin-left: 0.2rem;
            font-size: 0.25rem;
        }
        .dall{
            font-size: 0.1rem;
            float: right;
        }
        .info-links label {
            display: block;
            height: 1.06rem;
            line-height: 1.06rem;
            border-bottom: 1px solid #f1f1f1;
            font-size: .34rem;
        }

        label {
            text-decoration: none;
            color: #666;
        }
        .mui-btn{
            width: 19%;
            height: 1rem;
            padding: 0;
            border: 0.009rem solid #4d4d4d;
            background-color: #fff;
            border-radius:0.1rem;
            margin: 0.2rem 0.44rem;
            outline: none;
        }
        .kahao{
            color: #000;
        }
        .money{
            color: #666;
            font-size: 0.2rem;
        }
        /*充值颜色*/
        .as{
            background-color: #0b76ac;
            color: #fff;
        }
        .imged{
            padding-top: 0.25rem;
        }
        .dew{
            padding-bottom: 0.5rem;
            font-size: 0.25rem;
            color: #000;
            padding-left: 0.5rem;
        }
        .radio{
            /*display: none;*/
            opacity: 0;
        }

    </style>
</head>
<body>
<div class="header">
    <div><a href="javascript:history.back(-1)"><img src="/static/app/img/fanh.png"></a></div>
    <div>设备续费</div>
    <div></div>
    <!--<div><a href="javascript:;" class="head-btn iconfont">&#xe765;</a></div>-->
</div>
<div class="center">
    {include file='public:head_img'}
    <form id="form" form="submit">
        {foreach name="list" key="key" item="v"}
    <div class="info-links">
        <a href="javascript:;">
            <input type="radio" name="equ_id" class="imei"  {if $key=="0"}checked="checked"{/if}value="{$v.id}" >IMEI:<span class="gdf">{$v.name}</span><span class="dall">({if $v.expire_time<=time()}已过期{else}{$v.expire_time|date='Y-m-d',###}到期{/if})</span>
        </a>
    </div>
        {/foreach}
        <div class="info-links" style="margin-bottom: 0.1rem">
            <div class="login-container">
                <button type="button" class="mui-btn as" onclick="money(this)"><span class="kahao as" data-val="1">月卡</span><div class="money as">50.0元</div></button>
                <button type="button" class="mui-btn " onclick="money(this)"><span class="kahao" data-val="2">季卡</span><div class="money">50.0元</div></button>
                <button type="button" class="mui-btn" onclick="money(this)"><span class="kahao" data-val="3">年卡</span><div class="money">50.0元</div></button>
                <button type="button" class="mui-btn" onclick="money(this)"><span class="kahao" data-val="3">年卡</span><div class="money">50.0元</div></button>
            </div>
        </div>


    <div class="info-links">

        <label onclick="ref(this)" class=""><img src="/static/app/img/weixin.png" class="imged">
            <span class="dew">微信支付</span>
                <input type="radio" name="leixin" value="weixin" class="radio" checked >
                <img src="/static/app/img/queren.png" class="queren" style="margin-left: 3.4rem;" >
                <!--<label class="sfvw1"></label>-->
        </label>

        <!--<label onclick="ref(this)"><img src="/static/app/img/zhifubao.png" class="imged">-->
            <!--<span class="dew">支付宝</span>-->
            <!--<input type="radio"  name="radio" class="radio">-->
            <!--<img src="/static/app/img/queren.png" class="queren" style="margin-left: 3.4rem;display: none">-->
        <!--</label>-->
            <button type="button" onclick="roleSubmit()" class="button_lar" >确定支付</button>

    </div>
    </form>

</div>
<!--{include file='public:bottom'}-->
</body>
<!--{include file='public:validation'}-->
<script>
    //改不金额样式
    function money(obj) {
        //去除样式
        $(obj).siblings().removeClass("as");
        $(obj).siblings().children().removeClass("as");
        //添加样式
        $(obj).addClass("as");
        $(obj).children().addClass("as");
    }
    function ref(obj) {
        $(obj).siblings().removeClass("as");
    }

    //充值提交
    function roleSubmit(){
       var money = $('.kahao.as').attr('data-val');
       var equ_id =$('input:radio[name=equ_id]:checked').val();
        var leixin = $('input:radio[name=leixin]:checked').val();
        if(equ_id == undefined){
            layer.msg('未绑定设备', {shade: 0.5, time: 1000,icon: 2});
            return false;
        }
        $.ajax({
            url:"{:Url('rechargeData1')}",
            type:'POST',
            data:{
                money:money,
                equ_id:equ_id,
                leixin:leixin
            },
            dataType: 'json',
            success:function(res){
                if (res.code != 200) {
                    layer.msg(res.msg, {shade: 0.5, time: 1000,icon: 2});
                    return false;
                }
                    window.location.href=res.data;
            }
        });
    }
</script>
</html>